<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>校车线路详情-云校通-教师</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart class="xcgl">
	<div class="weui_tab tab-bottom">
		<div class="weui_tab_bd">
	   		<div class="weui-header bg-white f-black"> 
				<div class="weui-header-left"> <a class="icon icon-109 f-black" id="redirect"></a></div>
				<h1 class="weui-header-title f-black" style="overflow: inherit;" id="lineName"></h1>
				<c:if test="${isFollowTeacher }">
					<div class="weui-header-right">
						<a href="<%=basePath %>/ls/schoolbus/list" class="f-green">列表</a>
					</div>
				</c:if>
			</div>
			<!--时间线-->
			<div class="timeline1">
				<ul class="xcgl_timesq" id="siteList">
				</ul>
				<div class="xcgl_listToggle tcenter">展开 <span class="icon icon-74"></span></div>
			</div>
			<!--End时间线-->
	        
	        <div class="weui_cells weui_cells_access" id="teacherInfo" style="margin: 0;">
	        </div>
	        
	        <div class="weui_cells weui_cells_access mt10">

	            <div class="weui_cell">
	                <div class="weui_cell_hd">
	                		<img alt="" style="width:15px;margin-right:10px;display:block" src="<%=basePath%>/images/head-xcgl2.jpg">
	                </div>
	                <div class="weui_cell_bd weui_cell_primary f-15">
	                    <p class="xcgl_student_wrap">
	                    	<span class="xcgl_student_name">乘客名单</span>
	                    	<a onclick="loadStudentList('grade')" class="xcgl_student_state" style="background: #18b4ed;padding-top: 2px;">班级</a>
							<a onclick="loadStudentList('site')" class="xcgl_student_state" style="background: #18b4ed;padding-top: 2px;">站点</a>
	                    </p>
	                </div>
	            </div>
	            <div id="studentList">
	            </div>
	        </div>
	        
		    
		</div>
		<div class="weui_tabbar">
			<div class="fsdx_tabbar xcgl_tabbar">
	            <span class="left">全车共:<span id="totalCount"></span>人&nbsp;&nbsp;已上车:<span id="boardCount">0</span>人</span>
	            <span class="right hide" id="noticeSend"><a href="">发送信息</a></span>
	        </div>
		</div>
	</div>
	<!--弹窗-->				
	<div class="weui_mask ueureiu weui_mask_visible" style="display: none;">
	</div>
	<div class="weui_dialog ueureiu weui_dialog_visible" style="display: none;">
	
		<div class="weui_dialog_bd" style="padding: 0;">
			
			<div class="weui_panel weui_panel_access">
	            <div class="weui_panel_bd" id="telList">
	            </div>
	        </div>
		</div>
	
	</div>
	<!--End弹窗-->
<script type="text/javascript">
	var isTeacher = false;
	var isSchoolbusManager = '${isSchoolbusManager}' == 'true' ? true : false;
	$(function(){
		initRedirect();
		loadSite();
		
		//隐藏弹出框
		$(".weui_mask").click(function(){
			$(".weui_mask").hide();
			$(".weui_dialog").hide();
			$("#telList").html('');
		});
		
		//是否发送短信
		$(".xcgl_tabbar .right a").click(function(){
			var totalCount = parseInt($("#totalCount").html());
			var boardCount = parseInt($("#boardCount").html());
			var tips = "是否发送学生乘车信息到家长?";
			if(boardCount == 0) return;
			if(boardCount < totalCount) {
				tips = "还有小孩未上车，是否确认发送学生乘车信息到家长?";
			}
	        $.confirm("", tips, function() {
	        	$.ajax({
		    		url: basePath + "/ls/schoolbus/boardRemind",
		    		type: 'POST',
		    		dataType : "json",
		    		data: {
		    			lineId: parseInt("${lineId}")
		    		},
		    		success: function(data) {
		    			if(data.code == '000') {
		    				$.toast("发送成功");
		    			}else {
		    				$.toptips(data.msg);
		    			}
		    		},
		    		error: function(data) {
		    			alert("系统异常,请联系管理员");
		    		}	
				});
	        }, function() {
	        	//取消操作
	        });
	        return false;
		});
		
		//收起、展开
		$(".xcgl_listToggle").click(function(){
			var obj = $(this);
			if(obj.hasClass("on")){
				obj.removeClass("on")
				$(".timeline1 ul").addClass("xcgl_timesq");
				obj.html('展开 <span class="icon icon-74"></span>');
			}else{
				obj.addClass("on")
				$(".timeline1 ul").removeClass("xcgl_timesq");
				obj.html('收起 <span class="icon icon-35"></span>');
			}
		})
	})
	//上车
	function studentBoard(thiz){
		if(!isTeacher) return;
		var obj = $(thiz);
		var studentId = obj.attr("student-id");
		var id = obj.attr("data-id");
		var isBoard = 1;
		if(obj.hasClass("xcgl_student_state_blue")){
			isBoard = 0;
		}
		$.ajax({
    		url: basePath + "/ls/schoolbus/studentBoard",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			lineId: parseInt("${lineId}"),
    			studentId: studentId,
    			isBoard: isBoard
    		},
    		success: function(data) {
    			if(data.code == '000') {
    				if(obj.hasClass("xcgl_student_state_blue")){
    					obj.removeClass("xcgl_student_state_blue").text("未上车");
    					obj.closest(".weui_cell").find(".weui_cell_hd .f-green").addClass("f-graybc").removeClass("f-green");
    				}else{
    					obj.addClass("xcgl_student_state_blue").text("已上车");
    					obj.closest(".weui_cell").find(".weui_cell_hd .f-graybc").addClass("f-green").removeClass("f-graybc");
    					obj.attr("data-id", data.data.id);
    				}
    				$("#boardCount").html($("#studentList").find(".xcgl_student_state_blue").length);
    			}else {
    				$.toptips(data.msg);
    			}
    		},
    		error: function(data) {
    			alert("系统异常,请联系管理员");
    		}	
		});
	}
	
	//电话
	function telList(grade, clazz, parentPhone1, parentPhone2){
		$(".weui_mask").addClass("weui_mask_visible").removeAttr("style").show();
		$.ajax({
    		url: basePath + "/ls/schoolbus/teacherPhone",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			grade: grade,
    			clazz: clazz
    		},
    		success: function(data) {
    			if(data != null && data.length > 0) {
    				$(".weui_dialog").addClass("weui_dialog_visible").removeAttr("style").show();
    				var telListHtml = "";
    				for(var i in data) {
    					telListHtml += '<a href="tel:'+data[i].phone+'" class="weui_media_box weui_media_appmsg">\
		                    <div class="weui_media_bd tleft">\
		                        <h4 class="weui_media_title pl20"><span style="display: inline-block;min-width: 100px;">'+data[i].roleName+'</span> <span class="f-blue">'+data[i].phone+'</span></h4>\
		                    </div>\
		                </a>';
    				}
    				if(parentPhone1 !=null && parentPhone1.length > 0) {
    					telListHtml += '<a href="tel:'+parentPhone1+'" class="weui_media_box weui_media_appmsg">\
		                    <div class="weui_media_bd tleft">\
		                        <h4 class="weui_media_title pl20"><span style="display: inline-block;min-width: 100px;">家长1</span> <span class="f-blue">'+parentPhone1+'</span></h4>\
		                    </div>\
		                </a>';
    				}
    				if(parentPhone2 !=null && parentPhone2.length > 0) {
    					telListHtml += '<a href="tel:'+parentPhone2+'" class="weui_media_box weui_media_appmsg">\
		                    <div class="weui_media_bd tleft">\
		                        <h4 class="weui_media_title pl20"><span style="display: inline-block;min-width: 100px;">家长2</span> <span class="f-blue">'+parentPhone2+'</span></h4>\
		                    </div>\
		                </a>';
    				}
		            $("#telList").html(telListHtml);
    			}
    		},
    		error: function(data) {
    			alert("系统异常,请联系管理员");
    		}
    	});
	}
	function initRedirect() {
		var from = queryStringByName("from");
		from != null && from == "list" ? $("#redirect").attr("href", basePath + "/ls/schoolbus") : 
		$("#redirect").attr("href", basePath + "/ls");
	}
	function loadSite() {
		$.ajax({
    		url: basePath + "/ls/schoolbus/lineDetail",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			lineId: parseInt("${lineId}")
    		},
    		success: function(data) {
    			if(data != null) {
    				if("${user.teacher.name}" == data.teacherName) {
    					isTeacher = true;
    					$("#noticeSend").show();
    				}
    				$("#lineName").html(data.lineName);
    				var siteListHtml = "";
    				var teacherInfoHtml = "";
    				for(var i in data.siteList) {
    					i = parseInt(i);
    					var site = data.siteList[i];
    					siteListHtml += '<li class="timeline-item">\
							<div class="timeline-item-head">\
								<i class="weui_icon weui_icon_success_no_circle timeline-item-checked hide"></i>\
								<span class="f-white">'+(parseInt(i)+1)+'</span>\
							</div>\
							<div class="timeline-item-tail'+((data.siteList.length == (i+1)) ? 'hide' : "") +'"></div>\
							<div class="timeline-item-content">\
								<h4><span>'+site.siteName+'</span></h4>\
							</div>\
						</li>';
    				}
    				$("#siteList").html(siteListHtml);
    				teacherInfoHtml = '<a class="weui_cell" href="tel:'+data.phone+'"">\
		                <div class="weui_cell_hd">\
		                		<img alt="" style="width:20px;margin-right:10px;display:block" src="<%=basePath%>/images/head-xcgl.jpg">\
		                </div>\
		                <div class="weui_cell_bd weui_cell_primary f-15">\
		                    <p><span class="mr30">跟车老师</span> '+data.teacherName+'</p>\
		                </div>\
		                <div class="weui_cell_ft bgNone">'+data.phone+'</div>\
		            </a>';
		            $("#teacherInfo").html(teacherInfoHtml);
		            loadStudentList("grade");
    			}
    		},
    		error: function(data) {
    			alert("系统异常,请联系管理员");
    		}
    	});
	}
	function loadStudentList(order){
		$.ajax({
    		url: basePath + "/ls/schoolbus/studentList",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			lineId: parseInt("${lineId}"),
    			order: order
    		},
    		success: function(data) {
    			if(data != null && data.length > 0) {
    				var studentHtml = "", boardCount = 0;
    				for(var i in data) {
    					var itm = data[i];
    					var isBoard = false;
    					if(itm.isBoard == 1) {
    						isBoard = true;
    						boardCount += 1;
    					}
    					studentHtml += '\
    						<div class="weui_cell f-15">\
	    						<div class="weui_cell_hd">\
				                	<span class="icon icon-70 mr10 f20 '+(isBoard ? 'f-green' : 'f-graybc')+'"></span>\
				                </div>\
				                <div class="weui_cell_bd">\
				                    <span class="xcgl_student_name">'+itm.studentName+'</span>\
				                </div>\
				                <div class="weui_cell_bd">\
				                	<span class="xcgl_student_name">'+itm.gradeName+"("+itm.clazz+")班"+'</span>\
				                </div>\
				                <div class="weui_cell_bd weui_cell_primary ml5">\
				                	<span class="xcgl_student_name">'+itm.siteName+'</span>\
				                </div>\
				                <div class="weui_cell_bd">\
				                	<span class="xcgl_student_stateWrap" style="margin-left:0;"><span class="xcgl_student_state '+(isBoard ? 'xcgl_student_state_blue' : '')+'" student-id="'+itm.studentId+'" data-id="'+itm.boardId+'" onclick="studentBoard(this)">'+(isBoard ? '已上车' : '未上车')+'</span></span>\
				                </div>';
				                if(isTeacher || isSchoolbusManager) {
				                	studentHtml += '<div style="margin-left: 2px;" class="weui_cell_ft bgNone" onclick="telList('+itm.grade+','+itm.clazz+',\''+itm.parentPhone1+'\',\''+itm.parentPhone2+'\')"><img class="xcgl-tel" style="width:20px;" src="<%=basePath%>/images/dianhua@3x.png"></div>';
				                }
				                studentHtml += '</div>';
    				}
    				$("#totalCount").html(data.length);
    				$("#boardCount").html(boardCount);
    				$("#studentList").html(studentHtml);
    			}
    		},
    		error: function(data) {
    			alert("系统异常,请联系管理员");
    		}	
		});
	}
</script>
</body>
</html>